<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小玖吼吼</title>
<meta name="keywords" content="free css templates, wooden wall, one page, wooden strips background, CSS, HTML" />
<meta name="description" content="Wooden Wall - Free CSS Template provided by templatemo.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/coda-slider.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
	
    <div id="slider">
    <div id="templatemo_wrapper">
    	
        <div id="header">
            
            <h1><a href="#" target="_blank">小玖<span>个人主页</span></a></h1>
        </div>
        
        <div id="menu">
            <ul class="navigation">
                <li><a href="#home" class="selected">主页<span class="ui_icon home"></span></a></li>
                <li><a href="#aboutus">学习进度<span class="ui_icon aboutus"></span></a></li>
                <li><a href="#services">时光<span class="ui_icon services"></span></a></li>
                <li><a href="#gallery">作品<span class="ui_icon gallery"></span></a></li>
                <li><a href="#contactus">联系我<span class="ui_icon contactus"></span></a></li>
            </ul>
        </div>
        
        <div id="content">
        
            <div class="scroll">
                <div class="scrollContainer">
                
                    <div class="panel" id="home">
                            <h2><!--<marquee behavior="" direction="" class="xj2"> 欢迎来到小玖的主页</marquee>--></h2>    
                    	<div class="col_320 float_l">
                        	
                            <h2>简介</h2>    
                            
                            <a class="logoj" href="#"><img src="images/wodelogo.gif" alt="image" class="image_wrapper" /></a>
                          <p><em>你好我叫小玖，一个简简单单的网络混子，我是一个学习web前端的学生，但是我更加向往的是能够在网络上生存。</em></p>
                            <p>码畜是我的工资，丰富的是我的生活。</p>
                        </div>
                        
                        <div class="col_320 float_r">
                            <h2>A New Beginning</h2> 
                            <p>网络混子小玖扬帆起航。<br />The cyber confounder Xiaojiu set sail. <br />Xiaojiu is unparalleled in the world!</p>
                            <ul class="service_list">
                                <li><a href="#" class="service_one">姓名：高玉广</a></li>
                                <li><a href="#" class="service_two">职业：学生</a></li>
                                <li><a href="#" class="service_three">邮箱：2968346697@qq.com</a></li>
                                <li><a href="#" class="service_four">来自：河北省沧州市</a></li> 
                                <li><a href="#" class="service_five">企鹅:2968346697</a></li>   
                            </ul>
                        </div>
                    </div> <!-- end of home -->
                    
                    <div class="panel" id="aboutus">
                        <!--<h1>About Us</h1>
                        <div class="image_wrapper image_fl"><img src="images/templatemo_image_02.jpg" alt="image" /></div>
                        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus turpis. Vivamus cursus tortor quis leo ullamcorper auctor quis tincidunt metus.</em></p>
                        <p align="justify">Vestibulum vitae lectus a leo commodo egestas. Sed et ligula mauris. Donec interdum iaculis eros, sed porttitor justo ornare ac. Suspendisse ultrices arcu auctor sapien malesuada dictum. <a href="#">Vivamus non</a> ante sit amet ligula dignissim blandit ut sit amet purus. Sed tristique euismod lectus sed scelerisque. Curabitur convallis fringilla ante, eget eleifend magna iaculis eget. Praesent at nunc tellus. Sed sed auctor odio. Maecenas ut mauris eu ligula placerat tempor vel ac augue. Integer fermentum, ante eget sodales lacinia, nisl diam semper elit, non hendrerit nunc urna vitae erat. Etiam vel nisi risus.</p>
                      <p align="justify">Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. Nam sodales, pede vel dapibus lobortis, ipsum diam molestie risus, a vulputate risus nisl pulvinar lacus. Vestibulum tempus porttitor ipsum, ut dictum metus molestie eu. <a href="#">Donec interdum</a>, mi ut facilisis posuere, neque sapien lacinia urna, nec hendrerit dolor arcu sed justo. Aenean rhoncus porttitor dolor non posuere. Nulla eu mi id tellus vehicula pellentesque et vitae magna. </p>-->
						<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
						<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
						
						<div class="qwe">
							<h2>html</h2>
							<div class="progressbar" data-perc="80">
								<div class="bar"><span></span></div>
								<div class="label"><span></span></div>
							</div>
						</div>
						<div class="qwe">
							<h2>css</h2>
							<div class="progressbar" data-perc="75">
								<div class="bar color2"><span></span></div>
								<div class="label"><span></span></div>
							</div>
						</div>
						<div class="qwe">
							<h2>js</h2>
							<div class="progressbar" data-perc="80">
								<div class="bar color3"><span></span></div>
								<div class="label"><span></span></div>
							</div>
						</div>
						<div class="qwe">
							<h2>ps</h2>
							<div class="progressbar" data-perc="50">
								<div class="bar color4"><span></span></div>
								<div class="label"><span></span></div>
							</div>
						</div>
						<script type="text/javascript">
						$(function() {
								
							$('.progressbar').each(function(){
								var t = $(this),
								dataperc = t.attr('data-perc'),
								barperc = Math.round(dataperc*5.56);
								t.find('.bar').animate({width:barperc}, dataperc*25);
								t.find('.label').append('<div class="perc"></div>');
								
								function perc(){
									var length = t.find('.bar').css('width'),
									perc = Math.round(parseInt(length)/5.56),
									labelpos = (parseInt(length)-2);
									t.find('.label').css('left', labelpos);
									t.find('.perc').text(perc+'%');
								}
								perc();
								setInterval(perc, 0); 
							});
							
						});
						</script>
                  </div>
                    
                    <div class="panel" id="services">
                    	
                    	<div class="sxs">
							<div class="swiper-container">
							    <div class="swiper-wrapper">
							      <div class="swiper-slide" style="background-image:url(images/1526041891.png)"></div>
							      <!-- <div class="swiper-slide" style="background-image:url(wodelogo.gif)"></div>
							      <div class="swiper-slide" style="background-image:url(images/logo1.jpg)"></div>
							      <div class="swiper-slide" style="background-image:url(./images/nature-4.jpg)"></div>
							      <div class="swiper-slide" style="background-image:url(./images/nature-5.jpg)"></div> -->
								  <div class="swiper-slide" style="background-image:url(images/gf/320758361C22AE21C9D5DF2E4E575A4E.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/352256145B896D0CEB566EF3035BF610.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/430414F5B9ACD74769AAAECF538931F3.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/67F5FF4116DD15C6C153ABCB65754AA5.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/77EB5F787D67D2C4BC0CD3A7A112A832.jpg)"></div>
								  <!-- <div class="swiper-slide" style="background-image:url(images/gf/77EB5F787D67D2C4BC0CD3A7A112A832.jpg)"></div> -->
								  <div class="swiper-slide" style="background-image:url(images/gf/7AD553AE5728DEAEDDE0A7C706BEC379.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/7B90DFAC8ED18286B50FC7C6A9888675.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/895F07EDC599898ED18310EB813562C6.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/8B77FDD547C7842A919908DFDF037B22.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/9343F440E5F578D0C994F8FC0C68F0CE.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/9FCAC0506B342B2FBB413C83DA753529.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/BC84BD9508407EAE65CBB83E5AE67824.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/BCA4EA5CC65AF65751D499C4637B1C50.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/C05A90D5DFF73A8987140E49B87E3EF2.jpg)"></div>
								  <div class="swiper-slide" style="background-image:url(images/gf/F92326AAC032C126FFD3AF6F6B92A591.jpg)"></div>
							    </div>
							    <!-- Add Pagination -->
							    <div class="swiper-pagination swiper-pagination-white"></div>
							    <!-- Add Arrows -->
							    <div class="swiper-button-next swiper-button-white"></div>
							    <div class="swiper-button-prev swiper-button-white"></div>
								<script src="js/swiper.js" type="text/javascript">
									
								</script>
								<script>
								    var swiper = new Swiper('.swiper-container', {
								      spaceBetween: 30,
								      effect: 'fade',
								      pagination: {
								        el: '.swiper-pagination',
								        clickable: true,
								      },
								      navigation: {
								        nextEl: '.swiper-button-next',
								        prevEl: '.swiper-button-prev',
								      },
								    });
								  </script>
							  </div>
							  <div class="cba">
								  
							  </div>
						</div>
                    </div>
                
                    <div class="panel" id="gallery">
                        <h1>我的作品</h1>
                        
                        <div id="gallery_container">
                            <div class="gallery_box">
                                <img src="images/123.png" alt="01" />
                                <h4>待办事项</h4>
                                <p>可以添加你的待办事项</p> 
                                 <div class="btn_more"><a target="_blank" href="http://xiao-jiu.gitee.io/daiban/">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>
                            </div>
                            <div class="gallery_box">
                                <img src="images/QQ截图20191018082100.png" alt="02" />
                                <h4>QQ</h4>
                                <p>QQ的官网首页</p> 
                                 <div class="btn_more"><a target="_blank" href="http://xiao-jiu.gitee.io/qq/">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>                      
                            </div>
                            <div class="gallery_box">
                                <img src="images/QQ截图20191007075121.png" alt="03" />
                                <h4>获取QQ头像</h4>
                                <p>一个可以获取QQ头像的网页</p> 
                                 <div class="btn_more"><a target="_blank" href="http://xiao-jiu.gitee.io/asda/">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>     
                            </div>
                            <div class="gallery_box">
                                <img src="images/QQ截图20191007075413.png" alt="04" />
                                <h4>uikit</h4>
                                <p> 响应式网页</p> 
                                 <div class="btn_more"><a target="_blank" href="http://xiao-jiu.gitee.io/ulkit">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>             
                            </div>
                            <div class="gallery_box">
                                <img src="images/QQ截图20191007075621.png" alt="05" />
                                <h4>天涯明月刀</h4>
                                <p>第一次完成大网页</p> 
                                 <div class="btn_more"><a target="_blank" href="http://xiao-jiu.gitee.io/tianyamingyuedao/">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>          
                            </div>
                            <div class="gallery_box">
                                <img src="images/QQ截图20191007075758.png" alt="06" />
                                <h4>漫威</h4>
                                <p>一个漫威题材的网页</p> 
                                 <div class="btn_more"><a target="_blank" href="#">查看 <span>&raquo;</span></a></div>
                                <div class="cleaner"></div>          
                            </div>
                            <div class="cleaner"></div>
                        </div>
                
                    </div>
                
                    <div class="panel" id="contactus">
                    	<h1>请联系我。</h1>
                                                
                        <div class="col_320 float_l">
                           <!-- <div id="contact_form">
                            
                                <form method="post" name="contact" action="#contactus">
                    
                                    <label for="author">Name:</label> <input name="author" type="text" class="input_field" id="author" maxlength="60" />
                                    <div class="cleaner_h10"></div>
                                    
                                    <label for="email">Email:</label> <input name="email" type="text" class="input_field" id="email" maxlength="60" />
                                    <div class="cleaner_h10"></div>
        
                                    <label for="text">Message:</label> <textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
                                    <div class="cleaner_h10"></div>
                                    
                                    <input type="submit" class="submit_btn float_l" name="submit" id="submit" value="发送" />
                                    <input type="reset" class="submit_btn float_r" name="reset" id="reset" value="重置" />
                                
                           		</form>
                                
                            </div> -->
							<br>	
							我的邮箱是：2968346697@qq.com
							
							<br>
							<div>
								<p>
									我的QQ：
									<br>
									<a href="http://sighttp.qq.com/msgrd?v=1&uin=2968346697">http://sighttp.qq.com/msgrd?v=1&uin=您的QQ</a>
								</p>
							</div>
							<br>
							<div>
								<p>
									我的码云：
									<br>
									<a href="https://gitee.com/xiao-jiu">https://gitee.com/xiao-jiu</a>
								</p>
							</div>
							<br>
							<div class="xiaowx">
								<p>
									我的微信：
									<br>
									<img src="images/B5F3AD95DE762CDFE4BFF4F6BABC720B.jpg" alt="">
								</p>
							</div>
						</div>
                        
                        <div class="col_320 float_r">
                        	<marquee behavior="" direction="">小玖举世无双</marquee>
                            <p>小玖超级聪明耶
                            <br />喜欢小玖就给小玖留个言吧！</p>
                                                
                        	<h4>我的地址</h4>
                            
                            <h6>小玖的家</h6>
                            河北省沧州市东光县大单镇洼里高村269号<br />大家后最后一户人家的前面。<br />
                            
                			<br />
                     		电话：15175719810<br />
                        	电话：17631750018 <br>
							WX:iii52O1314 <br>
							qq:2968346697
                        </div>
                	</div>
                    
                </div>
            </div>
            
            <!-- end of scroll -->
        
        </div> <!-- end of content -->
        
        <div id="footer">
        	
            Copyright © 2019 <a href="http://xiao-jiu.gitee.io/gerenzhuye" target="_blank">xiaojiugongzuoshi</a> - 
        	有事留言<a href="http://xiao-jiu.gitee.io/gerenzhuye" target="_blank" title="fp">小玖</a>
        
        </div>
    
    </div> <!-- end of wrapper -->
    </div> <!-- end of slider -->
		<h2 class="act2">小玖已学习
			<span id="btn1">00</span>年
			<span id="btn2">00</span>月
			<span id="btn3">00</span>日
			<span id="btn4">00</span>时
			<span id="btn5">00</span>分
			<span id="btn6">00</span>秒
		</h2>
		<script type="text/javascript">
			function r(){
				var a = new Date();//获取现在的时间
				var d = Date.parse("Mar 25, 2018");//设定网站建立的时间
				 
				var t = a.getTime()-d;//计算网站已经建立了多少时间
				 
//				document.write("本网站已建立");
				 
				//计算并输出网站建立的时间
				//通过取余运算符和取整方法计算
				var n=parseInt(t/31536000000);
				var btn1 = document.querySelector('#btn1').innerHTML = n;
				
//				document.write(n+"年");
				var m=t%31536000000;
				 
				var y=parseInt(m/2592000000);
				var btn2 = document.querySelector('#btn2').innerHTML = y;
//				document.write(y+"月");
				var m=t%2592000000;
				 
				var r=parseInt(m/86400000);
				var btn3 = document.querySelector('#btn3').innerHTML = r;
//				document.write(r+"日");
				var m=t%86400000;
				 
				var xs=parseInt(m/3600000);
				var btn4 = document.querySelector('#btn4').innerHTML = xs;
//				document.write(xs+"小时");
				var m=t%3600000;
				 
				var fz=parseInt(m/60000);
				var btn5 = document.querySelector('#btn5').innerHTML = fz;
//				document.write(fz+"分钟");
				var m=t%60000;
				 
				var miao=parseInt(m/1000);
				var btn6 = document.querySelector('#btn6').innerHTML = miao;
//				document.write(miao+"秒");
				

			}
			r();
			setInterval(r,1000);
			</script>	
</body>
</html>